<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生成绩显示页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
        body {
            background-color: #f2f3f5;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            padding: 20px;
        }

        .table-container {
            width: 980px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .title {
            font-size: 22px;
            color: #333;
            font-weight: bold;
            margin: 0 0 20px 20px;
            padding-top: 15px;
        }

        .layui-table {
            border-radius: 4px;
            overflow: hidden;
        }

        .layui-table th {
            background-color: #f8f8f9;
        }

        .pass-tag {
            display: inline-block;
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            text-align: center;
        }

        .pass {
            background-color: #67c23a;
        }

        .fail {
            background-color: #f56c6c;
        }

        .subject-tag {
            background-color: #ecf5ff;
            color: #409eff;
            border: 1px solid #d9ecff;
        }

        .filter-container {
            margin-bottom: 15px;
            text-align: right;
        }

        .pagination {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="table-container">
    <p class="title">我的分数</p>

    <div class="filter-container">
        <div class="layui-inline">
            <label class="layui-form-label">考试日期：</label>
            <div class="layui-input-inline">
                <select id="dateFilter" lay-filter="dateFilter">
                    <option value="">全部日期</option>
                    <option value="2023-11-01">2023-11-01</option>
                    <option value="2023-11-15">2023-11-15</option>
                    <option value="2023-11-20">2023-11-20</option>
                </select>
            </div>
        </div>
    </div>

    <table class="layui-table" lay-filter="scoreTable" id="scoreTable">
        <colgroup>
            <col width="330">
            <col width="340">
            <col width="140">
            <col width="100">
        </colgroup>
        <thead>
        <tr>
            <th lay-data="{field:'answerDate', width:330, sort:true}">考试日期</th>
            <th lay-data="{field:'subject', width:340}">课程名称</th>
            <th lay-data="{field:'etScore', width:140}">考试分数</th>
            <th lay-data="{field:'passStatus', width:100}">是否及格</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2023-11-20</td>
            <td><span class="layui-badge subject-tag">高等数学</span></td>
            <td>92</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-15</td>
            <td><span class="layui-badge subject-tag">大学英语</span></td>
            <td>85</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-01</td>
            <td><span class="layui-badge subject-tag">程序设计基础</span></td>
            <td>78</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-20</td>
            <td><span class="layui-badge subject-tag">数据结构</span></td>
            <td>65</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-15</td>
            <td><span class="layui-badge subject-tag">线性代数</span></td>
            <td>58</td>
            <td><span class="pass-tag fail">不及格</span></td>
        </tr>
        <tr>
            <td>2023-11-01</td>
            <td><span class="layui-badge subject-tag">计算机组成原理</span></td>
            <td>72</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-20</td>
            <td><span class="layui-badge subject-tag">操作系统</span></td>
            <td>89</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-15</td>
            <td><span class="layui-badge subject-tag">计算机网络</span></td>
            <td>53</td>
            <td><span class="pass-tag fail">不及格</span></td>
        </tr>
        <tr>
            <td>2023-11-01</td>
            <td><span class="layui-badge subject-tag">数据库原理</span></td>
            <td>95</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        <tr>
            <td>2023-11-20</td>
            <td><span class="layui-badge subject-tag">软件工程</span></td>
            <td>81</td>
            <td><span class="pass-tag pass">及格</span></td>
        </tr>
        </tbody>
    </table>

    <div class="pagination" id="pagination"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use(['table', 'form', 'laypage'], function(){
        var table = layui.table;
        var form = layui.form;
        var laypage = layui.laypage;

        // 初始化表格
        table.init('scoreTable', {
            height: 'full-120' // 自适应高度
        });

        // 日期筛选事件
        form.on('select(dateFilter)', function(data){
            var value = data.value;
            var tableBody = document.querySelector('#scoreTable tbody');
            var rows = tableBody.querySelectorAll('tr');

            rows.forEach(function(row){
                var dateCell = row.cells[0].textContent;
                if(value === "" || dateCell === value) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        // 分页组件
        laypage.render({
            elem: 'pagination',
            count: 35, // 总数据量
            limit: 10, // 每页显示数量
            curr: 1,   // 当前页
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
            limits: [4, 6, 8, 10],
            jump: function(obj, first){
                // 模拟分页加载数据
                if(!first){
                    layer.msg('加载第 '+ obj.curr +' 页数据');
                }
            }
        });

        // 模拟加载状态
        layer.msg('数据加载中...', {icon: 16, shade: 0.01, time: 500});
    });
</script>
</body>
</html>